<template>
  <div class="index"> 
    <div v-for="item in movieInfoList">
      <div>{{item.alt}}</div>
      <div>{{item.collect_count}}</div>
      <div>{{item.id}}</div>
      <div>{{item.original_title}}</div>
      <div>{{item.subtype}}</div>
      <div>{{item.title}}</div>
      <div>{{item.year}}</div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize" 
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      total: 0,
      currentPage: 1,
      infoList: [],
      movieInfoList: [],
      pageSize: 3,//每页显示的数量
    };
  },
  methods: {
    ...mapActions({
      _getHotMovieList: "getHotMovieList"
    }),
    async getHotMovieList() {
      const res = await this._getHotMovieList();
      // 需要获取的数据
      this.infoList = res.subjects;
      // 总数据的长度
      this.total = res.subjects.length;
      this.computeArr();
    },
    computeArr() {
      // 页数，如果有小数，只取整数部分
      let pageNum = Number(String(this.total / this.pageSize).split(".")[0]);
      // 定义一个空数组
      let newArr = [];
      // 遍历获取的数据，每次遍历都把数组的0位置开始截取，截取数量为每页显示的数量
      for (let i = 0; i < pageNum; i++) {
        newArr.push(this.infoList.splice(0, this.pageSize));
      }
      // 判断剩余的数据有没有小于每一页的数量，如果小于，就把剩余的数据放进newArr数组
      if (this.infoList.length < this.pageSize) {
        newArr.push(this.infoList.splice(0, this.infoList.length));
      }
      // 将新的数组赋给infoList[],用来渲染页面
      this.infoList = newArr;
      // 第一次进入页面显示this.infoList[]数组的第一个元素
      this.movieInfoList = this.infoList[0]
    },
    handleCurrentChange(currentPage) {
      // currentPage为当前的页数
      // 显示当前页数对应的数据
      this.movieInfoList = this.infoList[currentPage - 1];
    }
  },
  mounted() {
    this.getHotMovieList();
  }
};
</script>

<style>

</style>
